<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas example</title>

<script>
    window.onload=function(){
    	var canvas = document.getElementById("mycanvas");
    	var ctx = canvas.getContext("2d");
    	ctx.strokeStyle='#ff0000';
    	ctx.fillStyle='#0000ff';
    	ctx.strokeRect(100,100,300,300);
    	ctx.fillRect(200,200,100,100);
    	
    	var color = new Array('#ff0000','#00ff00','#0000ff',
    								    '#ffff00','#00ffff','#ff00ff',
    								    '#000000','#212121','#cccccc');
    	var j=0;
    	for(i=10; i<500; i=i+60){
    		ctx.fillStyle=color[j];
    		ctx.fillRect(i, 450, 55,55 );
    		j++;
    	}
    	
    }
</script>
</head>
<body>
         <canvas id='mycanvas' width='600px' height='500px'>
         </canvas>
</body>
</html>